<template>

<!--  <div class="sexAgeCard" v-if="show">-->
<!--   -->
<!--    <a-row :gutter="24">-->
<!--      <div class="tj-title">-->
<!--        <h2>终端及机型分布</h2>-->
<!--        <div class="search">-->
<!--          <a-select defaultValue="activeUsers" :value="userType" style="width: 120px" @change="handleType">-->
<!--            <a-select-option value="activeUsers">活跃用户数</a-select-option>-->
<!--            <a-select-option value="newUser">新增用户数</a-select-option>-->
<!--          </a-select>-->
<!--          <a-select defaultValue="1" :value="time" style="width: 120px;margin-left: 10px;" @change="handleTime">-->
<!--            <a-select-option value="0">昨天</a-select-option>-->
<!--            <a-select-option value="1">最近7天</a-select-option>-->
<!--            <a-select-option value="2">最近30天</a-select-option>-->
<!--          </a-select>-->
<!--          <span style="margin-left: 10px; ">{{startTime}} - {{endTime}}</span>-->
<!--        </div>-->
<!--      </div>-->
<!--    </a-row>-->
<!--    <a-row :gutter="24">-->
<!--      <a-col :sm="24" :md="24" :xl="8" class="sex">-->
<!--        <v-chart :forceFit="true" :height="height" :data="platformsData" :scale="platformsScale">-->
<!--          <v-tooltip :showTitle="false" dataKey="item*percent"/>-->
<!--          <v-axis/>-->
<!--          <v-legend dataKey="item"/>-->
<!--          <v-pie position="percent" color="item" :vStyle="pieStyle" :label="labelConfig"/>-->
<!--          <v-coord type="theta" :radius="0.75" :innerRadius="0.6"/>-->
<!--        </v-chart>-->
<!--      </a-col>-->
<!--      <a-col :sm="24" :md="24" :xl="16" class="age">-->
<!--        <v-chart :forceFit="true" :height="height" :data="devicesData" :scale="deviceScale">-->
<!--          <v-tooltip/>-->
<!--          <v-axis/>-->
<!--          <v-bar position="name*number"/>-->
<!--        </v-chart>-->
<!--      </a-col>-->
<!--    </a-row>-->
<!--  </div>-->


</template>

<script>

  import { getUserPortrait } from '../../api/dashboard/chart'
  import moment from 'moment'

  const DataSet = require('@antv/data-set')

  const sourceData = [
    { item: '男', count: 31 },
    { item: '女', count: 5 }
  ]

  const dv = new DataSet.View().source(sourceData)
  dv.transform({
    type: 'percent',
    field: 'count',
    dimension: 'item',
    as: 'percent'
  })
  const platformsData = dv.rows


  const deviceScale = [{
    dataKey: 'sales'
  }]


  const platformsScale = [{
    dataKey: 'percent',
    min: 0,
    formatter: '.0%'
  }]

  export default {
    data() {
      return {
        show: false,
        startTime: '',
        endTime: '',
        userType: 'activeUsers',
        time: '1',

        platformsData: [],
        devicesData: [],

        platformsScale,
        deviceScale,
        height: 400,
        pieStyle: {
          stroke: '#fff',
          lineWidth: 1
        },
        labelConfig: ['percent', {
          formatter: (val, item) => {
            return item.point.item + ': ' + val
          }
        }]
      }
    },
    props: ['companyid'],
    created() {
      this.getAllMerchant('1', 'activeUsers')
    },
    watch: {
      username: function(newVal,oldVal){
        console.log(newVal,oldVal)
      }
    },
    methods: {
      handleType(value) {
        // console.log(`selected ${value}`)
        this.userType = value
        this.getAllMerchant(this.time, value)
      },
      handleTime(value) {
        // console.log(`selected ${value}`)
        this.time = value
        this.getAllMerchant(value, this.userType)

      },
      getAllMerchant: function(time, type, companyId) {

        //传两个参数过来
        // time
        // type 判断取什么值 visitUvNew / visitUv
        let myTime = new Date()
        //昨天
        const yesterday = moment(myTime).add(-1, 'd').format('YYYY年MM月DD日')
        //7天
        const week = moment(myTime).add(-1, 'w').format('YYYY年MM月DD日')
        //30天
        const month = moment(myTime).add(-1, 'M').format('YYYY年MM月DD日')

        if (time == '0') {
          this.startTime = yesterday
          this.endTime = yesterday
        } else if (time == '1') {
          this.startTime = week
          this.endTime = yesterday
        } else if (time == '2') {
          this.startTime = month
          this.endTime = yesterday
        }

        const body = {
          type: time,
          companyid: companyId != null ? companyId : this.companyid
        }
        // 取值男女 年龄段
        console.log('deviceLine')
        console.log(body)
        const DataSet = require('@antv/data-set')
        getUserPortrait(body).then(res => {
          if (res.code === 200) {
            this.show = true
            let platformsData = []
            let devicesData = []
            if (type == 'activeUsers') {//活跃用户
              // console.log('活跃用户')
              //网络数据
              let obj = res.result.visitUv.platforms
              for (let i in obj) {
                platformsData.push({
                  item: i,
                  count: obj[i]
                })
              }

              //我是分割线 饼形图数据源上

              let dev = res.result.visitUv.devices
              for (let i in dev) {
                if (dev[i] != 0) {
                  devicesData.push({
                    name: i,
                    number: dev[i]
                  })
                }
              }


            } else {// 新增用户
              // console.log('新增用户')

              //网络数据
              let obj = res.result.visitUvNew.platforms
              for (let i in obj) {
                platformsData.push({
                  item: i,
                  count: obj[i]
                })
              }

              //我是分割线 条形图数据源下
              let dev = res.result.visitUvNew.devices
              for (let i in dev) {
                if (dev[i] != 0) {
                  devicesData.push({
                    name: i,
                    number: dev[i]
                  })
                }
              }

            }

            const dv = new DataSet.View().source(platformsData)
            dv.transform({
              type: 'percent',
              field: 'count',
              dimension: 'item',
              as: 'percent'
            })

            this.platformsData = dv.rows

            this.devicesData = devicesData

          } else {

            this.show = false

            this.$notification.error({
              message: '错误',
              description: res.message,
              duration: 4
            })
          }
        })
      }
    },

  }
</script>


<style scoped lang="less">


  .tj-title {
   width: 100%;
    padding: 0 20px;

    h2 {
      line-height: 60px;
   }
 }

</style>